<template>
    <div class="picshare-wrap" :style="{ transform: 'scale('+scale+')'}">
        <h4>会计副业分享</h4>
        <div class="image-selector" :class="{ noborder: !!imgSrc }">
            <input type="file" accept="image/*" @change="doHandleSelect($event)"/>
            <img v-if="imgSrc" :src="imgSrc"/>
        </div>

        <div class="left-bottom-tag"></div>
        <div class="left-bottom-tag2"></div>

        <div class="left-img">
            <div class="img"></div>
            <h5>语桐<span>导师</span></h5>
            <ul>
                <li>90后制造业会计</li>
                <li>财会副业轻创业导师</li>
                <li>专注可复制的财会副业</li>
            </ul>
        </div>

        <p class="bottom-text">致力于帮助1000+财务同行创收</p>

        <img class="qrcode-img" :src="qrcodeUrl"/>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
    setup () {
        const scale = ref(1)
        const imgSrc = ref('')
        const qrcodeUrl = ref('./imgs/yt.jpg')

        const doHandleSelect = (e) => {
            const file = e.target.files[0]
            if (!file) {
                return
            }
            const reader = new FileReader()
            reader.onload = function (e) {
                imgSrc.value = e.target.result
            }
            reader.readAsDataURL(file)
        }

        onMounted(() => {
            const winWidth = document.documentElement.clientWidth || window.innerWidth
            if (winWidth < 640) {
                scale.value = winWidth / 640
            }
        })

        return {
            scale,
            imgSrc,
            qrcodeUrl,
            doHandleSelect
        }
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>